<template>
    <div class="els-container">
        <el-input v-if="el.el == 'input'" :placeholder="`输入${el.label || el.place}`" v-model="data[el.prop]"
            :maxlength="el.max || 1000" :type="el.type || 'text'" :disabled="el.disabled || isView || el.hidden"
            @input="$emit('change', 'input', data[el.prop])"  clearable></el-input>

        <el-input v-else-if="el.el == 'input-password'" :placeholder="`输入${el.label || el.place}`" v-model="data[el.prop]"
            :minlength="el.min || 10" :type="el.type || 'password'" :disabled="el.disabled || isView || el.hidden"
            @input="$emit('change', 'input', data[el.prop])" show-password clearable></el-input>   

        <el-switch v-else-if="el.el == 'switch'" v-model="data[el.prop]" active-color="#13C75B"
            @change="$emit('change', { res: $event, el })" :active-value="el.type ? 1 : true"
            :inactive-value="el.type ? 0 : false" :disabled="el.disabled || isView || el.hidden" /> 
            
        <el-radio-group v-else-if="el.el == 'radio'" v-model="data[el.prop]"
            :disabled="el.disabled || isView || el.hidden">
            <el-radio v-for="oitem in el.options" :key="oitem.value" :label="oitem.value"
                :disabled="oitem.disabled || el.hidden" @click="$emit('change', { res: oitem.value, el })">{{
                oitem.label }}</el-radio>
        </el-radio-group>

        <el-tree-select v-else-if="el.el == 'three-select'" filterable v-model="data[el.prop]" class="m-2"
            :placeholder="`选择${el.label || el.place}`" :multiple="el.multiple" :data="el.options"
            :render-after-expand="false" :props="el.props" @change="$emit('change', { res: $event, el })"
            :disabled="el.disabled || isView || el.hidden" />

        <el-cascader 
            v-else-if="el.el == 'cascader'"
            v-model="data[el.checkedKeys]" 
            :options="el.options" 
            :props="el.props"
            clearable 
            ref="cascaderRef"
            @change="handleCascaderChange">
            <template #default="{ node, data }">
                <span>{{ data.menu_name }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
        </el-cascader>

        <el-tree v-else-if="el.el == 'tree'" 
            :data="el.data" 
            show-checkbox 
            node-key="id" 
            ref="treeRef"
            :props="el.defaultProps" 
            :default-expand-all = true
            :default-checked-keys="data[el.checkedKeys]"
            @check-change="handleTreeChange" 
            >
        </el-tree>

        <el-select v-else-if="el.el == 'select'"  :disabled="el.disabled || isView || el.hidden" :clearable="el.isClear" filterable
            v-model="data[el.prop]" class="select m-2" :placeholder="`选择${el.label || el.place}`" :multiple="el.multiple"
            @clear="$emit('change', {
                item: el,
                res: '',
                el,
            })">
            <template #prefix v-if="showIcon(data, el)">
                <img :src="data.icon || data.url" class="icon_22" alt />
            </template>
            <el-option v-for="(oitem) in el.options" :key="el.props.value == 'self' ? oitem : oitem[el.props.value]"
                @click="
                    onSelectChange({
                        item: el,
                        res: el.props.value == 'self' ? oitem : oitem[el.props.value],
                        el,
                        oitem,
                    })
                    " :label="el.props.label == 'self' ? oitem : oitem[el.props.label]"
                :value="el.props.value == 'self' ? oitem : oitem[el.props.value]">
                <img v-if="oitem.url" :src="oitem.url" alt srcset class="icon_22" style="margin-right: 20px" />
                <img v-if="oitem.icon" :src="oitem.icon" alt srcset class="icon_22" style="margin-right: 20px" />
                <span>{{ el.props.label == "self" ? oitem : oitem[el.props.label] }}</span>
            </el-option>
        </el-select>

        <el-button v-else-if="el.el == 'button'" text size="default" :type="el.type" @click="$emit('change', el)">
            {{ el.label }}
        </el-button>

    </div>
</template>
<!-- <script>
export default {
    name: "els-container"
};
</script> -->
<script setup lang="ts">
import { ref, defineProps, defineEmits, computed, watchEffect } from "vue";

const emits = defineEmits(["change"]);

const props = defineProps({
    el: {
        type: Object,
        default: () => { }
    },
    data: {
        type: Object || any ,
        default: () => { }
    },
    isView: {
        type: Boolean,
        default: false
    }
});

const treeRef = ref(null);
const cascaderRef = ref(null);

const disabled = computed(() => {
    let { isView, el } = props;
    return isView || el.disabled || el.hidden;
});


const showIcon = (data, item) => {
    return (
        (data.icon || data.url) &&
        item.options &&
        typeof item.options[0] == "object" &&
        (item.options[0].url || item.options[0].icon)
    );
};

const onSelectChange = e => {
    emits("change", e);
};

const handleTreeChange = (data, checked) => {
    emits("change", 'tree', checked, data.id);
}

const handleCascaderChange = () => {
    let checked = cascaderRef.value.getCheckedNodes()[0].value;
    emits("change", 'cascader', true, checked);
}

watchEffect(() => {
    if(treeRef.value) emits("resetTree", 'tree', treeRef.value);
    if(cascaderRef.value) emits("resetTree", 'cascader', cascaderRef.value);
})
</script>

<style scoped lang="scss">
.select {
    width: 176px;
}
</style>